<template>
  <div class="ecological-analysis-container">
    <a-row :gutter="16">
      <a-col :span="24">
        <a-card title="生态环境指标分析">
          <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="water" tab="水质指标">
              <div ref="waterQualityChart" style="height: 400px"></div>
            </a-tab-pane>
            <a-tab-pane key="biodiversity" tab="生物多样性">
              <div ref="biodiversityChart" style="height: 400px"></div>
            </a-tab-pane>
            <a-tab-pane key="pollution" tab="污染指标">
              <div ref="pollutionChart" style="height: 400px"></div>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="12">
        <a-card title="环境因素对渔业影响分析">
          <div ref="impactChart" style="height: 400px"></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="生态保护区分布">
          <div ref="protectionZoneChart" style="height: 400px"></div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="24">
        <a-card title="生态环境与渔业资源关系">
          <p class="analysis-description">
            生态环境质量与渔业资源之间存在密切关系。水质、温度、溶解氧等环境因素直接影响鱼类的生长、繁殖和分布。
            研究表明，良好的生态环境是渔业可持续发展的基础，而环境污染和生态破坏则会导致渔业资源减少、品质下降。
          </p>
          <a-divider />
          <a-row :gutter="16">
            <a-col :span="8" v-for="(item, index) in ecologicalFactors" :key="index">
              <a-card class="factor-card">
                <template #title>
                  <div class="factor-title">{{ item.name }}</div>
                </template>
                <div class="factor-content">
                  <div class="factor-value">{{ item.value }}</div>
                  <div class="factor-status" :class="item.status">{{ item.statusText }}</div>
                  <div class="factor-description">{{ item.description }}</div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();
const activeKey = ref('water');

const waterQualityChart = ref(null);
const biodiversityChart = ref(null);
const pollutionChart = ref(null);
const impactChart = ref(null);
const protectionZoneChart = ref(null);

const ecologicalFactors = [
  {
    name: '水质指数',
    value: '85.3',
    status: 'good',
    statusText: '良好',
    description: '水质指数反映水体的清洁程度，直接影响鱼类生存环境。'
  },
  {
    name: '溶解氧含量',
    value: '7.2 mg/L',
    status: 'excellent',
    statusText: '优秀',
    description: '溶解氧是鱼类呼吸的基础，高含量有利于鱼类生长。'
  },
  {
    name: '水温变化',
    value: '±1.5°C',
    status: 'normal',
    statusText: '正常',
    description: '水温稳定性对鱼类繁殖和生长至关重要。'
  },
  {
    name: '富营养化指数',
    value: '42.7',
    status: 'warning',
    statusText: '警告',
    description: '水体富营养化会导致藻类过度繁殖，影响鱼类生存。'
  },
  {
    name: '重金属含量',
    value: '0.08 mg/L',
    status: 'normal',
    statusText: '正常',
    description: '重金属污染会在鱼体内积累，影响食品安全。'
  },
  {
    name: '生物多样性',
    value: '78.5',
    status: 'good',
    statusText: '良好',
    description: '生物多样性高的水域生态系统更稳定，渔业资源更丰富。'
  }
];

onMounted(() => {
  try {
    setTimeout(() => {
      if (waterQualityChart.value) initWaterQualityChart();
      if (biodiversityChart.value) initBiodiversityChart();
      if (pollutionChart.value) initPollutionChart();
      if (impactChart.value) initImpactChart();
      if (protectionZoneChart.value) initProtectionZoneChart();
    }, 100);
  } catch (error) {
    console.error('图表初始化错误:', error);
  }
});

const initWaterQualityChart = () => {
  try {
    const chartDom = waterQualityChart.value;
    if (!chartDom) return;
    
    const myChart = proxy.$echarts.init(chartDom);
    
    const option = {
      title: {
        text: '主要水域水质指标变化趋势',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['pH值', '溶解氧', '氨氮', '总磷'],
        bottom: 10
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2018', '2019', '2020', '2021', '2022', '2023']
      },
      yAxis: {
        type: 'value',
        name: '指标值'
      },
      series: [
        {
          name: 'pH值',
          type: 'line',
          data: [7.2, 7.3, 7.1, 7.4, 7.3, 7.2],
          smooth: true
        },
        {
          name: '溶解氧',
          type: 'line',
          data: [6.8, 6.5, 6.9, 7.1, 7.0, 7.2],
          smooth: true
        },
        {
          name: '氨氮',
          type: 'line',
          data: [0.8, 0.9, 0.7, 0.6, 0.5, 0.4],
          smooth: true
        },
        {
          name: '总磷',
          type: 'line',
          data: [0.05, 0.06, 0.05, 0.04, 0.04, 0.03],
          smooth: true
        }
      ]
    };
    
    myChart.setOption(option);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  } catch (error) {
    console.error('水质图表初始化错误:', error);
  }
};

const initBiodiversityChart = () => {
  const chartDom = biodiversityChart.value;
  const myChart = proxy.$echarts.init(chartDom);
  
  const option = {
    title: {
      text: '各水域生物多样性指数',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['鱼类', '浮游生物', '底栖生物'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['东海', '南海', '黄海', '渤海', '长江', '黄河', '太湖']
    },
    yAxis: {
      type: 'value',
      name: '多样性指数'
    },
    series: [
      {
        name: '鱼类',
        type: 'bar',
        data: [3.8, 4.2, 3.5, 3.2, 3.9, 3.1, 3.4]
      },
      {
        name: '浮游生物',
        type: 'bar',
        data: [4.1, 4.5, 3.8, 3.5, 4.2, 3.3, 3.9]
      },
      {
        name: '底栖生物',
        type: 'bar',
        data: [3.6, 3.9, 3.3, 3.0, 3.7, 2.8, 3.5]
      }
    ]
  };
  
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};

const initPollutionChart = () => {
  const chartDom = pollutionChart.value;
  const myChart = proxy.$echarts.init(chartDom);
  
  const option = {
    title: {
      text: '主要污染物含量变化',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['重金属', '农药残留', '石油类', '有机物'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2018', '2019', '2020', '2021', '2022', '2023']
    },
    yAxis: {
      type: 'value',
      name: '污染指数'
    },
    series: [
      {
        name: '重金属',
        type: 'line',
        data: [0.12, 0.11, 0.10, 0.09, 0.08, 0.08],
        smooth: true
      },
      {
        name: '农药残留',
        type: 'line',
        data: [0.08, 0.07, 0.07, 0.06, 0.05, 0.04],
        smooth: true
      },
      {
        name: '石油类',
        type: 'line',
        data: [0.15, 0.14, 0.12, 0.10, 0.09, 0.08],
        smooth: true
      },
      {
        name: '有机物',
        type: 'line',
        data: [2.8, 2.6, 2.4, 2.2, 2.0, 1.8],
        smooth: true
      }
    ]
  };
  
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};

const initImpactChart = () => {
  const chartDom = impactChart.value;
  const myChart = proxy.$echarts.init(chartDom);
  
  const option = {
    title: {
      text: '环境因素对渔业的影响程度',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    radar: {
      indicator: [
        { name: '水质', max: 100 },
        { name: '水温', max: 100 },
        { name: '溶解氧', max: 100 },
        { name: '盐度', max: 100 },
        { name: '营养物质', max: 100 },
        { name: '污染物', max: 100 }
      ]
    },
    series: [
      {
        name: '影响程度',
        type: 'radar',
        data: [
          {
            value: [85, 70, 90, 65, 75, 80],
            name: '影响程度',
            areaStyle: {
              color: 'rgba(0, 128, 255, 0.6)'
            }
          }
        ]
      }
    ]
  };
  
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};

const initProtectionZoneChart = () => {
  const chartDom = protectionZoneChart.value;
  const myChart = proxy.$echarts.init(chartDom);
  
  const option = {
    title: {
      text: '渔业生态保护区分布',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: ['东海', '南海', '黄海', '渤海', '长江', '黄河', '其他']
    },
    series: [
      {
        name: '保护区面积',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: 335, name: '东海' },
          { value: 310, name: '南海' },
          { value: 234, name: '黄海' },
          { value: 135, name: '渤海' },
          { value: 248, name: '长江' },
          { value: 147, name: '黄河' },
          { value: 97, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
};
</script>

<style scoped>
.ecological-analysis-container {
  padding: 10px 10px 0;
}

.analysis-description {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.factor-card {
  margin-bottom: 16px;
  height: 100%;
}

.factor-title {
  font-weight: bold;
  font-size: 16px;
}

.factor-content {
  text-align: center;
}

.factor-value {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}

.factor-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  margin-bottom: 10px;
}

.factor-status.excellent {
  background-color: #52c41a;
  color: white;
}

.factor-status.good {
  background-color: #1890ff;
  color: white;
}

.factor-status.normal {
  background-color: #faad14;
  color: white;
}

.factor-status.warning {
  background-color: #fa8c16;
  color: white;
}

.factor-status.danger {
  background-color: #f5222d;
  color: white;
}

.factor-description {
  font-size: 12px;
  color: #666;
  text-align: left;
}
</style> 